<template>
	<view class="city">
		<view class="city__search">
			<u-search placeholder="中文" bgColor="#fff" v-model="keyword" shape="square" :height="30" :showAction="false" @change="searchInput"></u-search>
		</view>
		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<u-index-item>
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<view class="" v-if="itemArr.length > 1 && index == 0 || index == 1">
						<view class="list-cell1" v-for="(cell, index) in item" @click="selectCity(cell)">
							<view class="list-cell1-hover" hover-class="clickable">{{cell}}</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="list-cell" v-for="(cell, index) in item" @click="selectCity(cell)">
							<view class="list-cell-hover" hover-class="clickable">{{cell}}</view>
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
		
		<!-- 搜索结果弹窗 -->
		<pop-box>
			<u-popup :show="searchVisible" mode="top" duration="0" @close="searchVisible = false" @open="searchVisible = true">
				<view class="city__search-result">
					<view class="list-cell" v-for="item in searchResult" @click="selectCity(item.AreaName)">
						<view class="list-cell-hover" hover-class="clickable">{{item.AreaName}}</view>
					</view>
				</view>
			</u-popup>
		</pop-box>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import PopBox from '@/components/custom/pop-box/index.vue'
	
	export default {
		components: {
			PopBox
		},
		data() {
			return {
				indexList: [],
				itemArr: [],
				keyword: '',
				searchVisible: false,
				searchResult: [],
				list: [],
				historyCity: _data.localData('history-city') ? _data.localData('history-city') : []
			}
		},
		onLoad() {
			this.getOuterAttendCityList()
		},
		methods: {
			/**
			 * 获取出差城市
			 * @param {Object} apiparam
			 * @param {Object} fn
			 */
			getOuterAttendCityList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getOuterAttendCityList',
					success(res) {
						let indexList = [];
						let itemArr = [];
						
						res.forEach(item => {
							if(indexList.indexOf(item.Initial) == -1) {
								indexList.push(item.Initial)
							}
						})
						indexList.unshift('热门')
						if(that.historyCity.length) indexList.unshift('历史')
						indexList.forEach((v,i) => {
							if(that.historyCity.length && v == '历史') {
								itemArr[i] = that.historyCity
							} else {
								itemArr[i] = []
							}
							res.forEach(item => {
								if(item.Initial == v) {
									itemArr[i].push(item.AreaName);
								} else if(v == '热门' && item.Popular == '1') {
									itemArr[i].push(item.AreaName)
								}
							})
						})
						that.indexList = indexList;
						that.itemArr = itemArr;
						that.list = res;
					}
				})
			},
			/**
			 * 获取县级城市上级
			 */
			getOuterAttendParentCityList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getOuterAttendParentCityList',
					apiparam: {
						areaname: this.keyword
					},
					success(res) {
						that.searchResult = res;
					}
				})
			},
			/**
			 * 选择城市
			 */
			selectCity(v) {
				let flag = false;
				this.historyCity.forEach(item => {
					if(item.indexOf(v) != -1) flag = true
				})
				if(!flag) this.historyCity.push(v)
				_data.localData('history-city',this.historyCity)
				_data.localData('select-city',v)
				setTimeout(() => {
					uni.navigateBack()
				},400)
			},
			/**
			 * 输入框事件
			 * @param {Object} e  输入值
			 */
			searchInput(e) {
				if(e) {
					this.searchVisible = true;
					this.searchResult = this.list.filter(item => {
						return item.AreaName.indexOf(e) != -1
					})
					if(!this.searchResult.length) {
						this.getOuterAttendParentCityList()
					}
					
				} else {
					this.searchVisible = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.city {
		padding-top: 82rpx;
		/* #ifdef H5 */
		padding-top: 82rpx;
		/* #endif */
		
		&__search {
			position: fixed;
			top: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			left: 0;
			right: 0;
			z-index: 99999;
			padding: 10rpx 20rpx;
			background-color: #007AFF;
		}
	}
	
	.city__search-result {
		height: 100vh;
		background-color: #fff;
		padding-top: 82rpx;
		/* #ifdef H5 */
		padding-top: 182rpx;
		/* #endif */
		box-sizing: border-box;
		overflow-y: scroll;
	}
	
	.list-cell1 {
		background-color: #fff;
		float: left;
		width: 30%;
		height: 60rpx;
		border-radius: 5rpx;
		flex-shrink: 0;
		margin: 10rpx 1.5%;
		line-height: 60rpx;
		text-align: center;
		
		&-hover {
			height: 100%;
			line-height: 60rpx;
		}
	}
	
	.list-cell {
		background-color: #fff;
		
		&-hover {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
		}
	}
	
	.city /deep/ .u-index-list__letter__item {
		width: 24px;
	}
</style>